<template>
  <div>
    <a-select
      :mode="multi==true?'multiple':'default'"
      style="width: 100%"
      placeholder="请选择项目进度"
      @deselect="deselect"
      v-model="id"
      :open="false"
      :disabled="disabled"
      @dropdownVisibleChange="selectIds">
      <a-select-option v-for="item in selectedObj" :key="item.id">{{item.nodeName}}</a-select-option>
    </a-select>
    <select-nodelist-input-modal ref="inputModal" :urlList="this.url.urlList" :multi="multi" @choseObj="choseObj"></select-nodelist-input-modal>
  </div>
</template>

<script>
  import SelectNodelistInputModal from './modules/SelectNodelistInputModal'
  import {getAction} from '@/api/manage'

  export default {
    name: "SelectNodelistInput",
    components: {SelectNodelistInputModal},
    props: {
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      value: {
        type: String,
        required: false
      },
      multi: {
        type: Boolean,
        default: false,
        required: false
      },
      contractId: {
        type: String,
      },
    },
    data() {
      return {
        id: [],
        selectedObj: [],
        deleteIds: [],
        list: [],
        objs:"",
        url: {
          queryById: "/api/erp/progress/erpProgressContractNode/queryById",
          queryByIds: "/api/erp/progress/erpProgressContractNode/queryByIds",
          urlList:"/api/erp/progress/erpProgressContractNode/queryValidListByContractId"
        },
      }
    },
    mounted() {
      //debugger;
      // this.initObj(this.value);
    },
    watch: {
      value(val) {
        this.initObj(val);
      },
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    methods: {
      initObj(id) {
        console.log(id);
        this.deleteIds = [];
        this.selectedObj = [];
        if(id) {
          this.id = [id]
          getAction(this.url.queryById,{ id }).then((res)=>{
            if(res.success){
              if(!Array.isArray(res.result)){
                this.selectedObj.push(res.result);
              }else{
                for(let i=0;i<res.result.length;i++){
                  this.selectedObj.push(res.result[i]);
                }
              }
              this.$refs.inputModal.edit(res.result,this.id);
            }
          });
        } else{
          this.id = [];
          this.$refs.inputModal.edit(null,null);
        }

      },
      resetObj() {
        this.userType = false;
        this.id = [];
        this.selectedObj = [];
        this.deleteIds = [];
        this.$refs.inputModal.edit(null, null);
      },
      selectIds() {
        if(!this.disabled){
          this.deleteId();
          if(!this.contractId){
            this.$message.warning('请先选择合同')
            return
          } else {
            this.$refs.inputModal.add(this.selectedObj, this.id);
            this.$refs.inputModal.loadData(this.contractId);
          }
        }
      },
      deselect(value, option) {
        this.deleteIds.push(value);
        this.deleteId();
        this.choseObj(this.selectedObj);
      },
      deleteId() {
        let that = this;
        this.selectedObj = this.selectedObj.filter(function (e) {
          return that.deleteIds.indexOf(e.id) == -1;
        })
        this.deleteIds = [];
      },
      // 子modal回调
      choseObj: function (list) {
        console.log(list);
        this.selectedObj = list;
        this.id = [];
        for (var i = 0; i < list.length; i++) {
          this.id.push(list[i].id);
        }
        this.objs=this.id.join(',')
        this.$emit("change", this.objs);
        this.$emit("back", this.selectedObj);
      },
    }
  }
</script>

<style scoped>

</style>